<template>
  <div class="page-line">
    <zj-header
      :name="name"
      style="margin-top: 20px"
      :show="show"
      :path="path"
    ></zj-header>
    <recommend-card
      :recommends="data"
      :configObj="configRemd"
      :userImgShow="false"
      :btom="6"
    >
      <template #botm-text="scope">
        <div class="slot-text text-full-hidden">
          {{ scope.item.name }}
        </div>
      </template>
    </recommend-card>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import ZjHeader from '@/base-ui/header'
import RecommendCard from './recommend-card.vue'

const props = defineProps({
  name: {
    type: String,
    default: '电台个性推荐'
  },
  data: {
    type: Array,
    required: true
  },
  configRemd: {
    type: Object,
    required: true
  },
  path: {
    type: String,
    default: ''
  }
})

const show = ref(true)
show.value = !!props.path
</script>

<style scoped>
.slot-text {
  width: 100%;
}
</style>
